<template>
  <div v-if="getUserType() == 2 && earningsAuth">
    <page-header :title="$t('m.My_Revenue')">
      <el-button
        type="primary"
        @click="withdrawClick"
        v-if="totalData.totalAmount > 0"
        >{{ $t('m.Withdrawal') }}</el-button
      >
    </page-header>

    <div class="container">
      <div class="box_index">
        <!--tab栏-->
        <div class="el_table_div" style="padding-bottom:0;">
          <el-tabs v-model="activeName" @tab-click="switchTab">
            <el-tab-pane
              :label="item.label"
              :name="item.value"
              v-for="item in optionsTab"
              :key="item.value"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 搜索栏 -->
        <search-bar :options="searchBarOptions" style="padding-top:0;" />

        <!--分割线-->

        <div class="box-total">
          <div class="card">
            <div class="title_medium">{{ $t('m.Total_revenue') }}</div>
            <div class="titl_large">
              {{ totalData.totalAmount | amountFormat }}
            </div>
          </div>
          <div class="card">
            <div class="title_medium">{{ $t('m.Balance') }}</div>
            <div class="titl_large">
              {{ totalData.balance | amountFormat }}
            </div>
          </div>
          <div class="card">
            <div class="title_medium">{{ $t('m.Total_withdrawal') }}</div>
            <div class="titl_large">
              {{ totalData.withdrawAmount | amountFormat }}
            </div>
          </div>
          <div class="card">
            <div class="title_medium">
              {{ $t('m.Withdrawal_under_review') }}
            </div>
            <div class="titl_large">
              {{ totalData.withdrawAuditsAmount | amountFormat }}
            </div>
          </div>
        </div>
        <!-- 表格栏 -->
        <div class="table-box">
          <!--表格-->
          <fast-table
            :options="fastTableOptions1"
            :data="page.records"
            v-if="activeName == 1"
          />
          <fast-table
            :options="fastTableOptions2"
            :data="page.records"
            v-else
          />
          <!-- 分页 -->
          <pagination
            :total="page.total"
            :current="page.current"
            :size="page.size"
            @changePageSize="changePageSize"
            @changePageNum="changePageNum"
          />
        </div>
      </div>
    </div>

    <!-- 提现 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="withdrawDialog"
      :title="$t('m.Withdrawal')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1">{{ $t('m.applyWithdrawalAmounts') }}*</div>
        <div class="dialog_content3" style="margin-bottom: 20px;">
          <el-form
            style="width:100%;"
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
          >
            <el-form-item prop="amount" class="el_form_item">
              <span class="el_currency" id="boxs">{{ symbolVal }}</span>
              <el-input
                v-model="ruleForm.amount"
                maxlength="14"
                :placeholder="$t('m.Please_enter')"
                class="el_form_input"
                :style="widthStyle"
                clearable
                @input="changeAmount"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialog_content">
        <div class="dialog_content1">
          {{ $t('m.Balance') }}: {{ totalData.balance | amountFormat }}
          <el-button
            style="color: var(--text-color);margin-left:12px;padding:0;"
            type="text"
            @click="ruleForm.amount = totalData.balance"
            >{{ $t('m.Withdrawal_all') }}</el-button
          >
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="cancel_btn" @click="withdrawDialog = false">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="submitWithdraw" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import page from '@/mixins/page'
import FastTable from '@/components/fast-table.vue'
import SearchBar from '@/components/search-bar.vue'
import Pagination from '@/components/pagination.vue'
export default {
  components: { Pagination, SearchBar, FastTable },
  mixins: [page],
  data () {
    return {
      optionsTab: [
        {
          value: '1',
          label: this.$t('m.settingMyBilling')
        },
        {
          value: '2',
          label: this.$t('m.Withdrawal_record')
        }
      ],
      optionsType: [
        { value: '', label: this.$t('m.all') },
        { value: '1', label: this.$t('m.orderDivide') },
        { value: '3', label: this.$t('m.Finance_Rental_refund') }
      ],
      auditType: [
        { value: '', label: this.$t('m.all') },
        { value: '0', label: this.$t('m.Pending_review') },
        { value: '1', label: this.$t('m.Approved') },
        { value: '2', label: this.$t('m.Rejected') }
      ],
      activeName: '1',
      ruleForm: {
        amount: ''
      },
      rules: {
        amount: [
          {
            required: true,
            message: this.$t('m.Enter_Withdrawal_amount'),
            trigger: 'blur'
          }
        ]
      },

      totalData: {
        balance: 0, //	账户余额
        totalAmount: 0, //	总收益
        withdrawAmount: 0, //	累计提现
        withdrawAuditsAmount: 0 //	提现审核中
      },

      fastTableOptions1: {
        columns: [
          {
            label: this.$t('m.Transaction_No'),
            prop: 'transactionNo',
            formatter: row => this.$format.strFormat(row.transactionNo)
          },
          {
            label: this.$t('m.Users_Details_Type'),
            prop: 'type',
            formatter: row =>
              this.$format.stateFormat(row.type, this.optionsType)
          },
          {
            label: this.$t('m.Users_Details_Amount'),
            prop: 'amount',
            formatter: row => this.$format.amountFormat(row.amount)
          },
          {
            label: this.$t('m.serialNumber_Order'),
            prop: 'orderNo',
            formatter: row => this.$format.strFormat(row.orderNo)
          },
          {
            label: this.$t('m.Finance_Transaction_date'),
            prop: 'tradingTime',
            formatter: row => this.$format.dateformat(row.tradingTime)
          }
        ]
      },

      fastTableOptions2: {
        columns: [
          {
            label: this.$t('m.Transaction_No'),
            prop: 'orderNo',
            formatter: row => this.$format.strFormat(row.orderNo)
          },
          {
            label: this.$t('m.applyWithdrawalAmounts'),
            prop: 'amount',
            formatter: row => this.$format.amountFormat(row.amount)
          },
          {
            label: this.$t('m.withdrawStatus'),
            prop: 'state',
            formatter: row =>
              this.$format.stateFormat(row.state, this.auditType)
          },
          {
            label: this.$t('m.Finance_Remarks'),
            prop: 'remark',
            formatter: row => this.$format.strFormat(row.remark)
          },
          {
            label: this.$t('m.Finance_Withdrawal_date'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          }
        ]
      },
      withdrawDialog: false,
      currencyWidth: null,
      earningsAuth: this.permissionsId(217)
    }
  },
  computed: {
    widthStyle () {
      return {
        '--currencyWidth': this.currencyWidth
      }
    }
  },
  created () {
    if (!this.earningsAuth) {
      return
    }
    this.getSearch()
    this.getPage()
    this.getTotal()
  },
  mounted () {},
  methods: {
    //获取货币宽度
    getWidth () {
      let boxs = document.getElementById('boxs')
      this.currencyWidth = boxs.clientWidth + 14 + 'px'
    },
    withdrawClick () {
      this.withdrawDialog = true
      this.getTotal()
      this.$nextTick(() => {
        this.getWidth()
      })
    },
    changeAmount (val) {
      this.ruleForm.amount = this.$check.amount(val)
      if (this.ruleForm.amount > this.totalData.balance) {
        this.ruleForm.amount = this.totalData.balance
      }
    },
    submitWithdraw () {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$api.withdraw.agentWithdraw(this.ruleForm).then(res => {
            if (this.$ok(res)) {
              this.$message.success(res.message)
              this.withdrawDialog = false
              this.getPage()
              this.getTotal()
            } else {
              this.$message.error(res.message)
            }
          })
        }
      })
    },

    // 切换tab
    switchTab () {
      this.page = this.$options.data.call(this).page
      this.params = this.$options.data.call(this).params
      this.getSearch()
      this.getPage()
    },

    getSearch () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: '',
            type: 'input',
            prop: 'search',
            placeholder: this.$t('m.Transaction_No')
          },
          {
            value: '',
            type: 'datePicker',
            prop: 'rangeTime',
            label:
              this.activeName == 1
                ? this.$t('m.Finance_Transaction_date')
                : this.$t('m.Finance_Withdrawal_date')
          },
          {
            value: '',
            type: 'select',
            prop: this.activeName == 1 ? 'type' : 'state',
            label:
              this.activeName == 1
                ? this.$t('m.Users_Details_Type')
                : this.$t('m.withdrawStatus'),
            options: this.activeName == 1 ? this.optionsType : this.auditType
          }
        ]
      }
    },
    getTotal () {
      this.$api.withdraw.getAgentTotal().then(res => {
        if (this.$ok(res)) {
          this.totalData = res.data
        }
      })
    },
    getPage () {
      this.$api.withdraw[
        this.activeName == 1 ? 'getBillingList' : 'getBillingRecord'
      ](this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  .box-total {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 8px 20px 0 20px;

    .card {
      min-width: 220px;
      background: #ffffff;
      border: 1px solid #d2d8e2;
      border-radius: 6px;
      padding: 20px 24px;
      margin-right: 20px;

      .title_medium {
        font-size: 14px;
        text-align: left;
        color: #39404d;
        line-height: 20px;
        margin-bottom: 4px;
      }
      .titl_large {
        font-size: 20px;
        font-weight: 600;
        text-align: left;
        color: #39404d;
        line-height: 24px;
      }
    }
  }
}
.el_form_item {
  position: relative;
  width: 100%;
  .el_currency {
    position: absolute;
    z-index: 9;
    left: 10px;
  }
  .el_form_input {
    width: 100%;
    margin-bottom: 0px !important;
    ::v-deep .el-input__inner {
      padding-left: var(--currencyWidth) !important;
    }
  }
}
</style>
